<template>
  <el-card :body-style="{ padding: '0px' }" class="knowledge-card tech-card-min" shadow="hover" @click.native="$emit('card-click', card)">
    <div class="card-header tech-header-glow" :style="{ background: card.bgColor }">
      <i :class="card.icon" class="card-icon tech-icon-white-glow"></i>
    </div>

    <div class="card-content">
      <div class="card-title">
        <span class="neon-text-primary-light">{{ card.name }}</span>
        
        <el-dropdown trigger="click" class="dropdown tech-dropdown">
          <i class="el-icon-more tech-icon-accent"></i>
          <el-dropdown-menu slot="dropdown" class="tech-dropdown-menu">
            <el-dropdown-item @click.native="handleEdit" class="tech-dropdown-item">编辑 (EDIT)</el-dropdown-item>
            <el-dropdown-item @click.native="handleDelete" class="tech-dropdown-item delete-item">删除 (DELETE)</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      
      <p class="card-desc sub-text">{{ card.description }}</p>
      
      <div class="card-meta sub-text">
        <span><i style="margin-right: 5px;" class="el-icon-document tech-icon-accent-mini" />{{ card.fileCount }} 个文件</span>
        <span class="monospace-text">更新于 {{ card.updateTimeStr }}</span>
      </div>
    </div>

    <KnowledgeEditModal :visible.sync="showEdit" @submit="handleEditKnowledge" :dataInfo="dataInfo"/>
  </el-card>
</template>

<script>
// JavaScript 逻辑保持不变
import { deleteKnowledge,handleEditKnowledge } from '@/api/knowledge'
import KnowledgeEditModal from './KnowledgeEditModal.vue'
export default {
  name: 'KnowledgeCard',
  components: { KnowledgeEditModal },
  props: {
    card: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showEdit: false, // 控制编辑弹窗显示
      dataInfo: {}
    }
  },
  methods: {
    /**
     * 打开编辑弹窗
     */
    handleEdit() {
      this.dataInfo = JSON.parse(JSON.stringify(this.card))
      this.showEdit = true
    },
    /**
     * 知识库重命名
     */
    async handleEditKnowledge(data) {
      console.log('编辑知识库:')
      console.log(data)
      const param = {
        ...data
      }
      const  res = await handleEditKnowledge(param);
      if(res && res.data.code === 200) {
        this.$message.success('知识库编辑成功')
        this.showEdit = false // 关闭编辑弹窗
        this.$emit('loadding') // 通知父组件刷新列表
      } else {
        this.$message.error(res.data.message || '知识库编辑失败，请稍后重试')
      }
    },
    /**
     * 删除知识库
     */
    handleDelete() {
      const that = this
      this.$confirm('此操作将永久删除该知识库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          knowledgeCode: that.card.knowledgeCode
        }
        deleteKnowledge(param).then(res => {
          if (res.data.code === 200) {
            that.$message.success('知识库删除成功')
            that.$emit('loadding') // 通知父组件刷新列表
          } else {
            that.$message.error('知识库删除失败，请稍后重试')
          }
        }).catch(err => {
          console.error('删除知识库失败:', err)
          that.$message.error('网络错误，请稍后重试')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }
}
</script>

<style scoped lang="less">
/* ================= 赛博朋克主题变量 (继承自父组件，这里重复以便独立调试) ================= */
@bg-dark: #0f1219;
@bg-panel: rgba(26, 31, 44, 0.7);
@primary-color: #00f2ff; /* Cyber Cyan */
@accent-color: #7d2ae8;  /* Neon Purple */
@text-main: #e2e8f0; // 浅色主文本
@text-sub: #94a3b8;  // 辅助文本
@border-color: rgba(255, 255, 255, 0.08);

/* ================= 知识卡片主体样式 ================= */
.knowledge-card {
  width: 100%;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  
  // 覆盖 Element UI 默认样式
  &.tech-card-min {
    background: @bg-panel !important;
    backdrop-filter: blur(10px);
    border: 1px solid @border-color;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    
    // 悬停效果
    &:hover {
      border-color: @primary-color;
      box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
      transform: translateY(-2px);
    }
  }
}

/* ================= 卡片头部和图标 ================= */
.card-header {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 背景色由 props 传入，这里添加光晕效果 */
  position: relative;
  z-index: 1;

  &.tech-header-glow {
    // 添加一个轻微的内阴影，使其看起来像一个发光的块
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  }
}

.card-icon {
  font-size: 38px;
  color: white;
}

.tech-icon-white-glow {
  color: white !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
}

/* ================= 卡片内容 ================= */
.card-content {
  padding: 16px;
  color: @text-main;
}

.card-title {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

// 标题文本
.neon-text-primary-light {
    color: @text-main;
    font-size: 16px;
    // 标题的轻微霓虹效果
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.1); 
}

// 描述文本
.card-desc {
  color: @text-sub;
  font-size: 13px;
  margin-bottom: 12px;
  // 确保在深色背景下清晰
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 36px;
}

.card-meta {
  font-size: 12px;
  color: @text-sub;
  display: flex;
  justify-content: space-between;
}

.tech-icon-accent-mini {
    color: @accent-color;
    text-shadow: 0 0 5px rgba(125, 42, 232, 0.3);
}

.monospace-text {
    font-family: 'Consolas', monospace;
}

/* ================= 下拉菜单 (Dropdown) 样式重写 ================= */
.dropdown {
  cursor: pointer;
  
  .tech-icon-accent {
      color: @accent-color;
      font-size: 18px;
      transition: color 0.3s;
      
      &:hover {
          color: @primary-color;
          text-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
      }
  }
}

// 菜单容器
::v-deep .tech-dropdown-menu {
  background-color: @bg-dark !important;
  border: 1px solid @accent-color !important;
  box-shadow: 0 4px 20px rgba(125, 42, 232, 0.5) !important;
  padding: 0;
  
  // 菜单项
  .tech-dropdown-item {
      color: @text-main !important;
      font-size: 13px;
      padding: 8px 15px;
      
      &:hover {
          background-color: rgba(0, 242, 255, 0.1) !important;
          color: @primary-color !important;
      }
  }
  
  .delete-item {
      color: #ff6666 !important;
      &:hover {
          background-color: rgba(255, 102, 102, 0.1) !important;
          color: #ff6666 !important;
      }
  }
}
</style>